<!DOCTYPE html>
<html lang="en" xmlns:zxw="http://www.w3school.com.cn" xmlns:njzxw="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>导入</title>
    <link rel="stylesheet" href="../../js/common/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common/animate.css" />
    <link rel="stylesheet" href="../../css/common/common.css" />
    <style type="text/css">
        .layui-upload-drag{
            text-align: center;
        }
        .layui-upload-drag img{
            width: 100px;
            height: 100px;
        }
        .layui-field-title{
            border-width: 1px;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body class="layout-zxw zxw-body" >

<form action="" id="form1" class="layui-form layui-fluid" lay-filter="form1" >
    <div class="layui-row layui-center" >
        <div class="layui-upload-drag" id="upload">
            <input type="hidden" id="resouce_id" lay-verify="upload" lay-verType="msg" name="resouce_id" value="" >
            <h3 style="color: #0000FF;font-weight: bold;display: none;" id="scbiaozhi"  >文件上传成功</h3>
            <p style="color: #40AFFE;" >点击或将文件拖拽到此处上传文件</p>
            <p>支持xls、xlsx文件上传</p>
            <p>文件总条数不要超过10000条,请适当分批上传</p>
        </div>
    </div>

    <div style="text-align: center;margin-top: 10px;" >
        <a href="#" id="tempa" style="color: blue;" >如不知晓导入格式请点击我下载</a>
    </div>
    <fieldset class="layui-elem-field layui-field-title" >
        <legend>导入结果</legend>
        <blockquote class="layui-elem-quote layui-quote-nm">
            总 数 据 条 数：<span class="layui-badge layui-bg-green sum">0</span>
            <br>校验成功条数：<span class="layui-badge layui-bg-blue succeedNum">0</span>
            <br>校验失败条数：<span class="layui-badge errorNum">0</span>
            <br>导入成功条数：<span class="layui-badge layui-bg-blue uploadSucceedNum">0</span>
            <br>导入失败条数：<span class="layui-badge uploadErrorNum">0</span>
            <br><a class="result layui-hide" href="javascript:layui.table.exportFile(table_.config.id, table_.data,'xls');" style="color: blue;" >导入后，点击此处下载结果文件</a>
        </blockquote>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title result layui-hide" >
        <legend>结果数据</legend>
        <div style="width: 100%;" class="zxw-list" >
            <table style="width: 100%;" id="resultTable" lay-filter="resultTable"></table>
        </div>
    </fieldset>

</form>

<script type="application/javascript" src="../../js/common/own/own.js?layui,jquery,treeview,njzxw,URL,myurl" >
    njzxw.layui.init();

    njzxw.layui.verify({
        upload:function(value, item){
            if($.trim(value) == ''){
                return "请先上传文件哦"
            }
        }
    });

    var saveUrl = eval('' + njzxw.getQueryParamsString("saveUrl") + '');
    var index_ = parent.layer.getFrameIndex(window.name);
    njzxw.layui.submit({
        url:saveUrl,
        fun:function(a,b){
            if(b.state == -1 || b.state == 1){
                $('.result').removeClass('layui-hide');
                var jsonHead = b.head;
                var cols = [];
                var cnt = 0;
                for(var ever in b.head){
                    cnt ++;
                }

                $('.sum').text(b.sum);
                $('.errorNum').text(b.errorNum);
                $('.succeedNum').text(b.succeedNum);
                $('.uploadErrorNum').text(b.uploadErrorNum);
                $('.uploadSucceedNum').text(b.uploadSucceedNum);

                for(var i=0;i<cnt;i++){
                    var col = {};
                    if(b.head['col'+i] != undefined){
                        col.field = 'col'+i;
                        col.title = b.head['col'+i];
                    }else{
                        col.field = 'errorMsg';
                        col.title = '错误信息';
                    }
                    cols.push(col);
                }
                table_ = layui.table.render({
                    elem: '#resultTable',
                    toolbar:true,
                    cellMinWidth:80,
                    title:'导入数据结果',
                    defaultToolbar:['exports'],
                    data: b.data, //数据接口
                    page: true, //开启分页
                    cols: [cols]
                });
                if(b.state == 1){
                    njzxw.alert({
                        msg:b.msg,
                        fun:function(a){
                            a();
                            if(opt.refresh == undefined){
                                parent.index.refresh();
                                $('#layui-layer'+index_,window.parent.document).find('.layui-layer-btn0').removeClass('layui-disabled').find('i').remove();
                            }
                        }
                    })
                }else{
                    njzxw.alert({
                        error:true,
                        msg:b.msg,
                        fun:function(a){
                            a();
                            $('#layui-layer'+index_,window.parent.document).find('.layui-layer-btn0').removeClass('layui-disabled').find('i').remove();
                        }
                    });
                }
            }else{
                njzxw.alert({
                    error:true,
                    msg:b.msg,
                    fun:function(a){
                        a();
                        $('#layui-layer'+index_,window.parent.document).find('.layui-layer-btn0').removeClass('layui-disabled').find('i').remove();
                    }
                });
            }
        }
    });
    layui.upload.render({
        elem: '#upload',
        url: URL.INDEX.UPLOADFILE,
        accept: 'file',
        exts:'xlsx|xls',
        done: function(res){
            $('.result').addClass('layui-hide');
            $('.sum').text(0);
            $('.errorNum').text(0);
            $('.succeedNum').text(0);
            $('.uploadErrorNum').text(0);
            $('.uploadSucceedNum').text(0);
            if(res.state == 1){
                var data = res.data[0];
                $('#resouce_id').val(data.id);
                $('#scbiaozhi').show();
            }else{
                $('#scbiaozhi').hide();
                njzxw.alert({
                    error:true,
                    msg:'上传失败'
                })
            }
        }
    });
    $('#tempa').attr('href',own.config.localhostPath+njzxw.getQueryParamsString('template'));
</script>
</body>
</html>